﻿<common:LayoutAwarePage
    x:Class="Looptribe.Moodlin8.View.CourseUsersPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Looptribe.Moodlin8.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common="using:Looptribe.Moodlin8.Common"
    DataContext="{Binding CourseUsers, Source={StaticResource Locator}}"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
        <Style x:Key="MyProfileSectionStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="130,0,60,10"/>
        </Style>
        <Style x:Key="MyProfileImageStyle" TargetType="Image">
            <Setter Property="Margin" Value="0,15,0,15"/>
            <Setter Property="Width" Value="260"/>
            <Setter Property="Height" Value="260"/>
            <Setter Property="Stretch" Value="Uniform"></Setter>
        </Style>
        <Style x:Key="MyProfileSectionTitleStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
            <Setter Property="TextTrimming" Value="WordEllipsis"/>
            <Setter Property="TextWrapping" Value="NoWrap"/>
            <Setter Property="Typography.StylisticSet20" Value="True"/>
            <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
            <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
            <Setter Property="FontSize" Value="26.667"/>
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
            <Setter Property="FontWeight" Value="Light"/>
            <Setter Property="LineHeight" Value="30"/>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <TranslateTransform X="-1" Y="6"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="Black"></Setter>
        </Style>
    </Page.Resources>

    <Grid>
        <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootStyle}">
            <Grid.Background>
                <ImageBrush ImageSource="ms-appx:///Assets/Background.png"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Back button and page title -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
                <Grid Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" MaxWidth="800"/>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="pageTitle" Text="{Binding Course.Fullname}" Style="{StaticResource MoodleAppTitleSyle}" Margin="0,0,0,40" Grid.Column="0" TextWrapping="NoWrap" TextTrimming="WordEllipsis"/>
                    <TextBlock Text=":" Style="{StaticResource MoodleAppTitleSyle}" Margin="0,0,10,40" Grid.Column="1"/>
                    <TextBlock x:Uid="CourseParticipantsPageTitle" Text="Participants" Style="{StaticResource PageHeaderTextStyle}" Foreground="Gray" Grid.Column="2"/>
                </Grid>
            </Grid>
            <SemanticZoom  x:Name="semanticZoom" Grid.Row="1" VerticalAlignment="Top" >
                <SemanticZoom.Background>
                    <ImageBrush/>
                </SemanticZoom.Background>
                <SemanticZoom.ZoomedOutView>
                    <GridView Height="615" x:Name="ZoomedOutView" ScrollViewer.IsHorizontalScrollChainingEnabled="False"  Margin="130,10,20,0" IsItemClickEnabled="True" >
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Height="70" Width="170" Background="OrangeRed"  >
                                    <TextBlock Height="70" Width="170" Margin="14,10,0,15"
                                            Text="{Binding Group.Key}"
                                            FontFamily="Segoe UI Light"
                                            FontSize="26" Foreground="White"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid ItemWidth="170" ItemHeight="70" MaximumRowsOrColumns="6" VerticalChildrenAlignment="Top" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="0" />
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="HorizontalContentAlignment" Value="Left" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                            </Style>
                        </GridView.ItemContainerStyle>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
                <SemanticZoom.ZoomedInView >

                    <GridView x:Name="ZoomedInView" ItemsSource="{Binding Source={StaticResource cvs2}}" IsItemClickEnabled="True" ItemClick="UserClick" Margin="0,10,20,0" SelectionMode="None" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" >
                        <GridView.Header>
                            <StackPanel x:Name="MyProfileSection" Width="260" Orientation="Vertical" Grid.Column="0" Style="{StaticResource MyProfileSectionStyle}">
                                <TextBlock Text="My Profile" Style="{StaticResource MyProfileSectionTitleStyle}" HorizontalAlignment="Left"></TextBlock>
                                <Image Source="{Binding CurrentUser.ProfileImageUrl}" Style="{StaticResource MyProfileImageStyle}"  HorizontalAlignment="Left"></Image>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding CurrentUser.Firstname}" Style="{StaticResource BodyTextStyle}"/>
                                    <TextBlock Text="{Binding CurrentUser.Lastname}" Style="{StaticResource BodyTextStyle}" Margin="5,0,0,0"/>
                                </StackPanel>
                            </StackPanel>
                        </GridView.Header>
                        <GridView.ItemTemplate>
                            <DataTemplate >
                                <Grid Height="70" Width="330" Margin="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="70" Height="70">
                                        <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                                    </Border>
                                    <Border Grid.Column="1" BorderThickness="1" Width="260" Height="70" BorderBrush="#FFD3D3D3" Background="{StaticResource HubListItemBackground}" HorizontalAlignment="Left">
                                        <StackPanel VerticalAlignment="Bottom" Margin="10,0,0,10" Orientation="Horizontal">
                                            <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" Margin="5" FontSize="18" FontFamily="Segoe UI Light" />
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.ContainerStyle>
                                    <Style TargetType="GroupItem">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="GroupItem">
                                                    <StackPanel Orientation="Vertical">
                                                        <ContentPresenter Content="{TemplateBinding Content}" />
                                                        <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
                                                    </StackPanel>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </GroupStyle.ContainerStyle>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="6" />
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </GridView.GroupStyle>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </SemanticZoom.ZoomedInView>
            </SemanticZoom>
            <VisualStateManager.VisualStateGroups>

                <!-- Visual states reflect the application's view state -->
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="FullScreenLandscape"/>
                    <VisualState x:Name="Filled"/>

                    <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                    <VisualState x:Name="FullScreenPortrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>

                    <!-- The back button and title have different styles when snapped -->
                    <VisualState x:Name="Snapped">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Grid>
</common:LayoutAwarePage>